<template>
    <div class="user">
        <div class="top_tool">
            <div @click.stop="login" class="iconfont icon-pifu"></div>
            <div @click.stop="login" class="iconfont icon-icon_xinjian"></div>
            <div @click.stop="setLogin" class="iconfont icon-shezhi"></div>
        </div>
        <div class="user_info">
            <div class="top_info" @click.stop="login">
                <img v-if="!loginToken" src="../assets/images/autor_img.png" alt="" />
                <img v-else src="../assets/images/autor.jpeg" alt="" />
                <h3 v-if="!loginToken"><span class="iconfont icon-bilibili"></span>账号登录</h3>
                <div v-else class="username">
                    <h3>用户名</h3>
                    <span>加入超漫俱乐部 享好礼特权</span>
                </div>
                <span class="gt iconfont icon-dayu"></span>
            </div>
            <div class="bottom_info" @click.stop="login">
                <div class="Card_wrap">
                    <h3>卡卷包</h3>
                    <span v-if="!loginToken">登录领卷</span>
                    <span v-else class="cardNum">0</span>
                </div>
                <div class="monthly_pass" @click.stop="login">
                    <h3>月票</h3>
                    <span>0</span>
                </div>
                <div class="money" @click.stop="login">
                    <h3>漫币</h3>
                    <p>首充奖励<span class="gt iconfont icon-dayu"></span></p>
                </div>
            </div>
        </div>
        <div class="user_center">
            <div class="girt" @click.stop="login">
                <img src="../assets/images/liwu.png" alt="" />
                <div class="girt_info">
                    <h3>福利中心<span>去签到</span></h3>
                    <p v-if="!loginToken">解锁进度:<span>--/--</span></p>
                    <p v-else>
                        解锁进度:<span>0/{{ this.dayNum }}</span>
                    </p>
                </div>
            </div>
            <div class="integral_shop">
                <img src="../assets/images/squery.png" alt="" />
                <div class="shop">
                    <h3>赛季积分商城</h3>
                    <p v-if="loginToken">剩余赛季积分:0</p>
                </div>
            </div>
        </div>
        <div class="icon_list">
            <div class="icon_item" v-for="(icon, index) in confs" :key="icon.weight">
                <a :href="index < 9 ? icon.jump_url : '#'">
                    <img :class="index < 4 ? 'big' : 'small'" :src="icon.icon" alt="" />
                    <div>{{ icon.title }}</div>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
import router from "@/router";
import { mapState } from "vuex";

export default {
    data() {
        return {
            confs: [],
            dayNum: "",
            loginToken: void 0,
        };
    },
    created() {
        this.getConfs();
        this.getDayAll();
        this.loginToken = localStorage.getItem("login");
    },
    computed: {
        ...mapState(["islogin"]),
    },
    methods: {
        async getConfs() {
            await this.axios.get("UCenterConf").then((res) => {
                this.confs = res.confs;
            });
        },
        //登录
        login() {
            if (!this.$store.state.islogin || this.loginToken) {
                return;
            } else {
                router.push("/login");
            }
        },
        setLogin() {
            router.push("/setLogin");
        },
        //获取当前月的总天数
        getDayAll() {
            let year = new Date().getFullYear();
            let month = new Date().getMonth();
            let date = new Date(year, month + 1, 0).getDate();
            this.dayNum = date;
        },
    },
};
</script>

<style lang="scss" scoped>
.user {
    height: 100vh;
    .top_tool {
        width: 100%;
        position: fixed;
        top: 0;
        right: 0;
        padding-top: 10px;
        padding-bottom: 20px;
        display: flex;
        justify-content: flex-end;
        background: rgba(212, 208, 208, 0.2);
        .iconfont {
            font-size: 20px;
            padding-right: 15px;
            padding-left: 5px;
        }
    }
    .user_info {
        margin: 50px 15px 30px;
        border-radius: 10px;
        position: relative;
        box-shadow: -20px 4px 6px 0 rgb(212 208 208 / 20%), 20px 3px 6px 0 rgb(212 208 208 / 20%),
            0px 20px 20px 0px rgb(212 208 208 / 20%);
        .top_info {
            display: flex;
            height: 65px;
            justify-content: space-between;
            justify-items: flex-end;
            padding-left: 100px;
            align-items: flex-end;
            color: #fff;
            padding-bottom: 30px;
            img {
                position: absolute;
                top: -8px;
                left: 10px;
                border-radius: 50%;
                width: 74px;
            }
            h3 {
                background: #31a9ff;
                border-radius: 20px;
                padding: 3px 10px;
                .iconfont {
                    padding-right: 5px;
                    font-size: 14px;
                }
            }
            .gt {
                color: #999;
                padding-right: 10px;
            }
            .username {
                h3 {
                    font-size: 16px;
                    color: #000;
                    font-weight: bold;
                    background: none;
                    padding: 0;
                }
                span {
                    color: #666;
                    background: #eee;
                    font-size: 12px;
                    padding: 3px 10px;
                    border-radius: 20px;
                    display: inline-block;
                    margin-top: 5px;
                }
            }
        }
        .bottom_info {
            display: flex;
            font-size: 12px;
            padding-bottom: 20px;
            .Card_wrap {
                width: 25%;
                height: 100%;
                padding-left: 10px;
                border-right: 1px solid #f00;
                h3 {
                    color: #666;
                }
                span {
                    color: #31a9ff;
                    font-size: 15px;
                    font-weight: bold;
                    opacity: 0.8;
                }
                .cardNum {
                    font-size: 16px;
                    color: #000;
                    font-weight: bold;
                }
            }
            .monthly_pass {
                width: 20%;
                padding-left: 10px;
                border-right: 1px solid #f00;
                h3 {
                    color: #666;
                }
                span {
                    font-weight: bold;
                    font-size: 16px;
                }
            }
            .money {
                flex: 1;
                padding-left: 10px;
                h3 {
                    color: #666;
                    padding-bottom: 2px;
                }
                p {
                    background: #fe9d10;
                    display: inline-block;
                    padding: 2px 5px 2px 10px;
                    border-radius: 20px;
                    color: #fff;
                    opacity: 0.8;
                    font-size: 13px;
                    .gt {
                        font-size: 12px;
                        padding-left: 5px;
                    }
                }
            }
        }
    }
    .user_center {
        display: flex;
        justify-content: space-between;
        .girt {
            display: flex;
            align-items: center;
            img {
                width: 30px;
                height: 30px;
                padding-right: 10px;
                padding-left: 30px;
            }
            .girt_info {
                border-right: 1px solid #666;
                padding-right: 13px;
                h3 {
                    font-weight: bold;
                    opacity: 0.8;
                    span {
                        color: #ff82a1;
                        background: #fde3e7;
                        padding: 3px 3px;
                        margin-left: 5px;
                    }
                }
                p {
                    margin-top: 3px;
                    font-size: 12px;
                    color: #666;
                    span {
                        margin-left: 15px;
                    }
                }
            }
        }
        .integral_shop {
            display: flex;
            align-items: center;
            padding-right: 35px;
            img {
                width: 30px;
                height: 35px;
                padding-right: 10px;
                padding-left: 0px;
            }
            .shop {
                h3 {
                    font-weight: bold;
                    opacity: 0.8;
                }
                p {
                    margin-top: 3px;
                    font-size: 12px;
                    color: #666;
                }
            }
        }
    }
    .icon_list {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        padding-top: 10px;
        font-size: 12px;
        color: #666;
        .icon_item {
            margin-bottom: 20px;
            .big {
                width: 50px;
                padding: 10px 20px 0px;
            }
            .small {
                width: 20px;
                padding: 10px 35px;
            }
        }
    }
}
</style>
